<template>
	<div style="padding: 50px 0;text-align: center;">
		<div id="box2" :style="{marginLeft:'100px'}">
			<div class="box">
				<div class="row" v-for="(item,row) in dataList" :key="row">
					<div v-for="(item2,line) in item" :key="line+99999" class="item" 
					:style="{backgroundColor:item2 == 1 ? color:'',borderColor:color2,borderWidth:item2 == 1 ? borWidth + 'px':'0px'}"
					 @click="changeArr(row,line,item2)">
						<div v-show="show">{{ 'x:' + row }}</div>
						<div v-show="show">{{ 'y:' + line }}</div>
					</div>
				</div>
			</div>
			<img v-show="showImg" :src="bcgImgUrl" alt="收款码" class="qrCode">
			<img id="head" :src="headImgUrl" alt="">
			<div id="fuzzy" v-show="!!headImgUrl"></div>
		</div>
		<div class="btns">
			<h3 style="display: flex;align-items: center;justify-content: space-between;padding-top: 14px;
			position: relative;z-index: 999; background-color: #FFFFFF;"
			 @click="toggle" >
				<span style="width: 178px;">菜单</span>
				<img src="../static/menu.png" alt="" style="height:22px ;">
			</h3>
			<div class="tran" :style="{transform:(`translateY(${translate < 0 ? 0:translate}px)`),marginTop:translate < 0 ? translate+'px':-translate+'px'}">
				<button @click="save">保存数据</button>
				<button @click="handleDownload">下载图片</button>
				<button @click="show = !show">隐藏/显示坐标</button>
				<button @click="showImg = !showImg">隐藏/显示背景</button>
				<button>背景颜色选择
					<colorPicker v-model='color' /></button>
				<button>边框颜色选择
					<colorPicker v-model='color2' /></button>
				<button>
					边框宽度调节
					<button style="margin: 0 4px 0 0;width: 22px;" @click="borWidth = borWidth + 1">+</button>
					<button style="margin:  0;width: 22px;" @click="borWidth = borWidth - 1">-</button>
				</button>
				<button style="position: relative;overflow: hidden;">
					上传中心处头像
					<input type="file" accept="image/*" ref='files' @change="imgFile" style="opacity: 0;position: absolute;top: 0;left: 0;right: 0;bottom: 0;">
				</button>
				<button style="position: relative;overflow: hidden;">
					上传背景图片
					<input type="file" accept="image/*" ref='files' @change="bcgImgFile" style="opacity: 0;position: absolute;top: 0;left: 0;right: 0;bottom: 0;">
				</button>
			</div>
		</div>
	</div>
</template>

<script>
	// import data2 from './data.json' 
	import html2canvas from "html2canvas"
	import downloadjs from 'downloadjs'
	export default {
		name: 'App',
		data() {
			return {
				show: true,
				color: '#FF2D52',
				color2: '#FF2D52',
				bcgImgUrl:require('../static/payCode.png'),
				borWidth: 1,
				translate:-400,
				headImgUrl: '',
				showImg: true,
				dataList: [
					[1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 0, 1, 1, 1, 1, 0, 0, 1, 0, 0, 1, 0, 1, 1, 1, 1, 0, 1, 0, 0, 1, 1, 1, 1, 1, 1, 1],
					[1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 1, 0, 1, 0, 1, 1, 1, 1, 0, 0, 1, 0, 0, 1, 0, 1, 0, 1, 0, 0, 0, 0, 0, 1],
					[1, 0, 1, 1, 1, 0, 1, 0, 1, 1, 1, 1, 1, 0, 0, 0, 1, 0, 1, 1, 0, 1, 1, 1, 0, 1, 1, 0, 0, 0, 1, 0, 1, 1, 1, 0, 1],
					[1, 0, 1, 1, 1, 0, 1, 0, 1, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 0, 0, 1, 1, 1, 1, 0, 0, 1, 0, 1, 1, 1, 0, 1],
					[1, 0, 1, 1, 1, 0, 1, 0, 0, 0, 0, 1, 0, 0, 1, 1, 0, 1, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 1, 1, 0, 1],
					[1, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 1, 1, 0, 1, 1, 0, 1, 1, 0, 0, 1, 1, 0, 1, 0, 1, 0, 1, 0, 0, 0, 0, 0, 1],
					[1, 1, 1, 1, 1, 1, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 1, 1, 1, 1, 1, 1],
					[0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 1, 1, 0, 1, 0, 1, 0, 1, 0, 0, 0, 1, 1, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0],
					[0, 0, 0, 1, 1, 0, 1, 1, 0, 1, 1, 0, 0, 1, 0, 1, 1, 1, 0, 0, 0, 1, 1, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 1, 1, 0, 0],
					[1, 0, 1, 0, 1, 1, 0, 1, 0, 0, 1, 1, 0, 0, 1, 1, 1, 1, 0, 1, 0, 1, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0],
					[1, 0, 0, 0, 1, 1, 1, 0, 1, 0, 1, 0, 0, 1, 1, 0, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 1, 0, 1, 0, 1, 0, 0, 1],
					[1, 0, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 1, 1, 0, 1, 1, 1, 1, 0, 0],
					[1, 0, 0, 0, 1, 0, 1, 1, 0, 1, 0, 1, 0, 0, 0, 1, 0, 1, 1, 0, 1, 0, 1, 1, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 1, 1, 1],
					[0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 1, 0, 1, 0, 1, 0, 0, 1, 1, 1, 0, 0, 1],
					[1, 0, 1, 1, 0, 1, 1, 0, 1, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 1, 1, 1, 1, 1, 0, 1, 0, 1, 0, 0, 0, 0, 1, 0, 0, 1, 1],
					[1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 1, 1, 1, 1, 0, 0, 1, 1, 1, 0, 0],
					[1, 1, 1, 0, 1, 0, 1, 1, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 1, 0, 1, 0, 1, 0, 1, 0, 1],
					[1, 0, 1, 0, 1, 1, 0, 0, 0, 1, 1, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 1, 0, 1, 0, 1, 0, 0, 0],
					[1, 1, 1, 1, 1, 0, 1, 1, 0, 0, 1, 1, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 1, 1, 1, 0, 1, 1, 0, 1, 0, 0, 1],
					[0, 0, 1, 1, 1, 1, 0, 1, 0, 0, 1, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 1, 0, 0, 1, 0, 1, 1, 0, 0, 0],
					[1, 0, 1, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 1, 1, 0, 0],
					[0, 1, 1, 0, 0, 1, 0, 1, 1, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 1, 0, 1, 0, 0, 1, 1, 0, 0, 1],
					[1, 1, 1, 0, 1, 0, 1, 0, 0, 1, 1, 1, 0, 1, 0, 1, 1, 0, 0, 0, 1, 1, 0, 0, 1, 0, 0, 1, 1, 1, 0, 0, 1, 0, 1, 0, 1],
					[0, 1, 0, 1, 1, 0, 0, 0, 1, 1, 0, 0, 1, 0, 1, 0, 0, 0, 1, 0, 1, 1, 1, 1, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 1, 1, 0],
					[1, 0, 0, 1, 1, 0, 1, 0, 1, 0, 0, 0, 0, 1, 1, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 1, 0, 0, 0, 1, 0],
					[1, 0, 1, 0, 0, 0, 0, 0, 1, 1, 1, 0, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1, 0, 1, 1, 1, 1, 0, 1, 0, 0, 1, 0, 1, 1, 1],
					[1, 1, 0, 0, 0, 0, 1, 1, 1, 0, 1, 0, 1, 0, 0, 0, 0, 0, 1, 0, 1, 1, 1, 0, 0, 0, 1, 1, 0, 1, 0, 1, 1, 1, 0, 1, 1],
					[1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 1, 1, 1, 0, 0, 0, 1, 1, 0, 1, 1, 0, 1, 0, 1, 0, 1, 1, 0, 1, 1, 0, 1, 1, 1],
					[1, 0, 0, 1, 0, 0, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1, 1, 1],
					[0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 1, 1, 1, 0, 1, 0, 1, 0, 1, 1, 0, 0, 0, 1, 1, 0, 1, 0, 0, 0, 1, 0, 0, 1, 1],
					[1, 1, 1, 1, 1, 1, 1, 0, 1, 0, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 1, 1, 0, 1, 1, 0, 1, 0, 1, 0, 1, 0, 1, 1, 1, 0, 1],
					[1, 0, 0, 0, 0, 0, 1, 0, 0, 1, 1, 1, 0, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1, 1, 1, 1, 0, 1, 1, 0, 0, 0, 1, 1, 0, 0, 1],
					[1, 0, 1, 1, 1, 0, 1, 0, 1, 1, 1, 0, 1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1, 0, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 1],
					[1, 0, 1, 1, 1, 0, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 0, 0, 1, 1, 1, 1, 1, 0, 0, 0, 1, 0, 1, 0, 1, 1, 0, 0, 0, 0, 0],
					[1, 0, 1, 1, 1, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 1, 1, 0, 1, 1, 1, 1, 0, 1, 0, 1, 1, 0, 1, 1, 1],
					[1, 0, 0, 0, 0, 0, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1],
					[1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 0, 1, 1, 1, 0, 0, 1, 0, 1, 0, 1, 0, 0, 1, 0, 0, 1, 1, 0, 0, 1, 0, 0, 0, 1]
				]
			}
		},
		created() {
			console.log(!!localStorage.getItem('data'))
			if (!!localStorage.getItem('data')) {
				this.dataList = JSON.parse(localStorage.getItem('data'))
			}
		},
		methods: {
			toggle(){
				this.translate = -this.translate
			},
			bcgImgFile(){
				let file = this.$refs.files.files[0]
				this.bcgImgUrl = this.getObjectURL(file)
			},
			imgFile(e) {
				let file = this.$refs.files.files[0]
				this.headImgUrl = this.getObjectURL(file)
			},
			getObjectURL(file) {
				var url = null;
				if (window.createObjectURL != undefined) { // basic
					url = window.createObjectURL(file);
				} else if (window.URL != undefined) { // mozilla(firefox)
					url = window.URL.createObjectURL(file);
				} else if (window.webkitURL != undefined) { // webkit or chrome
					url = window.webkitURL.createObjectURL(file);
				}
				return url;
			},
			changeArr(row, line, item2) {
				console.log((item2))
				let arrRow = this.dataList[row]
				let value = arrRow[line]
				value = !item2 * 1
				this.$set(this.dataList[row], line, value)
			},
			save() {
				localStorage.setItem('data', JSON.stringify(this.dataList))
			},
			handleDownload() {
				window.pageYOffset = 0;
				document.documentElement.scrollTop = 0
				document.body.scrollTop = 0

				let ele = document.getElementById('box2');
				let ignoreElements = ele.querySelector('.qrCode');
				html2canvas(ele, {
					logging: false,
					ignoreElements: (elements) => { //  忽略的ele
						return elements === ignoreElements;
					},
					height: 1110, // 下面解决当页面滚动之后生成图片出现白边问题
					width: 1110,
					useCORS: true
				}).then(function(canvas) {
					// canvas转为图片流
					let dataurl = canvas.toDataURL('image/png');
					downloadjs(dataurl, '大美的微信收款码', 'image/png');

					// let oImg = new Image();
					// oImg.src = canvas.toDataURL(); // 导出图片
					// document.body.appendChild(oImg);
				});
			}
		},
		mounted() {
			this.translate = -document.getElementsByClassName('tran')[0].clientHeight
		}
	}
</script>
<style lang="scss" scoped="scoped">
	* {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}
	.tran{
		transition:transform .5s;
		// margin-top: -400px;
	}
	#head {
		width: 200px;
		height: 200px;
		position: absolute;
		top: calc(50% - 100px);
		left: calc(50% - 100px);
	}

	#fuzzy {
		width: 210px;
		height: 210px;
		position: absolute;
		top: calc(50% - 105px);
		left: calc(50% - 105px);
		box-shadow: 0 0 20px 8px rgb(249, 249, 249) inset;
	}

	.btns {
		width: 180px;
		// overflow: auto;
		position: fixed;
		top: 0px;
		right: 5px;

		button {
			width: 180px;
			margin-top: 20px;
			padding: 2px 4px;
		}
	}

	.active {
		// background-color: rgba(255, 0, 0, 0.5);
	}

	.qrCode {
		position: absolute;
		left: calc(50% - 557px);
		top: 1px;
		// width: 1114px;
		height: 1110px;
		margin-left: 2px !important;
		z-index: -1;
	}

	#box2 {
		position: relative;
		display: block;
		width: 1110px;
		height: 1110px;
		padding: 0px;
		overflow: hidden;
	}

	.box {
		width: 1110px;
		height: 1110px;
	}

	.item {
		width: 30px;
		height: 30px;
		border-style: solid;
		font-size: 10px;
		text-align: center;
		line-height: 15px;
		overflow: hidden;
		box-sizing: border-box;
		div{
			transform: scale(0.8);
			height: 12.75px;
			// line-height: 15.75px;
		}
	}

	.row {
		overflow: hidden;
		display: flex;
	}

	.box,
	.qrCode {
		margin: 0 auto;
	}
</style>
